import { defineComponent, nextTick, reactive, ref, toRefs } from 'vue'
import XGlassBox from '../../components/GlassBox'
import XRadioOptions from '../../components/RadioOptions'
import TopHeader from './TopHeader.vue'

import * as API from '../../service/Api'

import { FIREColors } from './Colors'
const fireColors:FIREColors = {
    '水浸报警' : '#1cb2ff',
    '烟雾报警' : '#be85ff',
    '高温报警' : '#eb3d3f',
    '高温预警' : '#ff9c1c'
}

import DeviceWarnTypeStatisticsChart from './charts/DeviceWarnTypeStatisticsChart.vue'
import DeviceWarnTypeRateChart from './charts/DeviceWarnTypeRateChart.vue'
import FireWarnTop5Chart from './charts/FireWarnTop5Chart.vue'
import FireWarnProvinceTop5Chart from './charts/FireWarnProvinceTop5Chart.vue'
import Map from './charts/Map.vue'


export default defineComponent({
    components : {
        TopHeader,
        XGlassBox,
        XRadioOptions,

        DeviceWarnTypeStatisticsChart,
        DeviceWarnTypeRateChart,

        FireWarnTop5Chart,
        FireWarnProvinceTop5Chart,

        Map
    },

    setup() {
        const dateRangeType = reactive({
            totalTop5 : 1,
            provinceTop5 : 1
        })
        const deviceWarnType = ref(1)
        const dateRange = reactive ([{value : 1, label : '当日'}, {value : 2, label : '7日'}, {value : 3, label : '30日'}])
        let DeviceWarnTypeStatisticsData = reactive([])

        let FireWarnTop5Data = reactive([]) //总榜
        let FireWarnProvinceTop5Data = ref<any>(null) //省排行



        let warnTotalOverview = ref({ //总数预览
            deviceAlert: 0,
            deviceTotalNum: 0,
            fireAlert: 0,
            fireDeviceTotalNum: 0
        })


        let state = reactive({
            modalDialogRef : null,
            modalDialogLeft : 0,
            modalDialogTop : 0,
            modalVisible : false,

            mapWarnData : [],
            modalWarnData : {},





            fireDeviceDataListRef : null,
            filterParams : {

            },
            queryParams : {

            },

            fireDeviceDataList : [],

            exportLoading : false,

            fireDeviceListPagination : API.fireDeviceListPagination
        })





        async function warnTotalRank() {
            let colors = ['#ff9c1c', '#eb3d3f', '#be85ff', '#1cb2ff', '#a71cff']
            
            let data = await API.warnTotalRank(dateRangeType.totalTop5 as any)
            if(data) {
                data.sort(function(a:any, b:any){
                    b.num - a.num
                })
                FireWarnTop5Data.push(...data.map((item:any, index:number) => {
                    return {name : item.alarmStr, value : item.num, rate : item.percent / 100, percent : item.percent, alarmCode : item.alarmCode, color : colors[index]}
                }))
            }
        }

        async function warnProvinceRank() {
            FireWarnProvinceTop5Data.value = null
            let data = await API.warnProvinceRank(dateRangeType.provinceTop5 as any)
            if(data) {
                let fireWarnProvinceTop5Data = {
                    area : [],
                    data : []
                }

                data.forEach((item:any) => {
                    fireWarnProvinceTop5Data.area.push(item.name)
                    fireWarnProvinceTop5Data.data.push(item.num)
                })
                

                FireWarnProvinceTop5Data.value = fireWarnProvinceTop5Data
            }
        }


        async function getWarnTotalOverview() {
            let data = await API.warnTotalOverview()
            if(data) {
                warnTotalOverview.value = data
            }
        }

        async function mouseoverMap (e:any) {
            console.log(e)
            // if(e.value) {
            //     modalWarnData.value = e.value[2]

            //     modalVisible.value = true
            //     await nextTick()
            //     var WH = document.documentElement.offsetHeight || document.body.offsetHeight
            //     var H = state.modalDialogRef.offsetHeight
            //     var clientY = e.clientY


            //     state.modalDialogLeft = e.clientX - 30
            //     state.modalDialogTop = clientY - H + 30
                
            // }else {
            //     state.modalVisible = false
            // }
            
        }

        //warnTotalRank()
        //warnProvinceRank()

        //getWarnTotalOverview()


        setTimeout(() => {
            DeviceWarnTypeStatisticsData.push(...[{name : '功率异常', value : 3000}, {name : '设备漏电', value : 10}, {name : '继电器损坏', value : 9007}, {name : '保险丝断', value : 9000}])

            FireWarnTop5Data.push(...[{name : '消费1', value : 1, rate : 0.1, percent : 10, color : '#ff9c1c'},{name : '消费2', value : 2, rate : 0.1, percent : 10, color : '#ff9c1c'},{name : '消费3', value : 3, rate : 0.1, percent : 10, color : '#ff9c1c'},{name : '消费4', value : 4, rate : 0.1, percent : 10, color : '#ff9c1c'}])


            FireWarnProvinceTop5Data.value = {
                area : ['广东', '云南'],
                data : [100, 222]
            }


            warnTotalOverview.value = { //总数预览
                deviceAlert: 20,
                deviceTotalNum: 10,
                fireAlert: 40,
                fireDeviceTotalNum: 0
            }


        }, 1000)


        return {
            deviceWarnType,
            dateRange,
            dateRangeType,

            DeviceWarnTypeStatisticsData,

            FireWarnTop5Data,
            warnTotalRank,
            FireWarnProvinceTop5Data,
            warnProvinceRank,

            fireColors,


            warnTotalOverview,


            ...toRefs(state),
            mouseoverMap,

        }
    }
})